import React, {useEffect, useState} from "react";
import {Button, Input, notification} from "antd";
import {Map, Marker} from "react-amap";
import http from "../../../../request";

const Tab4 = (props) => {
    const {id, close, change} = props
    const [center, setCenter] = useState({})
    const [address, setAddress] = useState('')

    useEffect(() => {
        detail()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    
    return (
        <div className="container">
            <div className="u-flex">
                <Input placeholder="输入楼盘详细地址" onChange={e => setAddress(e.target.value)} style={{maxWidth: 250}} />
                <Button size="mini" type="primary" onClick={search}>
                    <img src={require('../../../../assets/icon/icon-6.png').default} alt="" />
                </Button>
            </div>
            <div className="u-m-t-20" style={{width: '100%', height: 600}}>
                <Map events={{
                    click: e => {
                        setCenter({longitude: e.lnglat.lng, latitude: e.lnglat.lat})
                    }
                }} center={center} plugins ={['ToolBar']}>
                    <Marker position={center} />
                </Map>
            </div>
            <div className="u-flex u-row-center u-m-t-20">
                <Button type="primary" onClick={update}>保存</Button>
                <Button type="primary" ghost className="u-m-l-20" onClick={() => close(!1)}>取消</Button>
            </div>
        </div>
    )
    function detail(){
        http('estate.one', {
            ids: id
        }).then(res => {
            if(res.code === 1){
                if(res.data.longitude_latitude){
                    let location = res.data.longitude_latitude.split(',')
                    setCenter({longitude: parseFloat(location[0]), latitude: parseFloat(location[1])})
                } else {
                    setCenter({longitude: 116.397128, latitude: 39.916527})
                }
            }
        })
    }
    function update(){
        http('estate.edit', {
            row: {
                id: parseInt(id),
                longitude_latitude: center.longitude+','+center.latitude
            }
        }).then(res => {
            if(res.code === 1){
                notification.success({
                    description: res.msg || '操作成功',
                })
                change(!1)
            } else {
                notification.error({
                    description: res.msg || '操作失败',
                })
            }
        })
    }
    function search(){
        http('estate.map', {address}).then(res => {
            if(res.code === 1){
                if(res.data.geocodes.length <= 0){
                    notification.error({
                        message: '请输入详细地址'
                    })
                    return 0;
                }
                let location = res.data.geocodes[0].location.split(',')
                setCenter({longitude: parseFloat(location[0]), latitude: parseFloat(location[1])})
            } else {
                notification.error({
                    message: res.msg || '获取失败，请重试'
                })
            }
        })
    }
}

export default Tab4